<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover" v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" size="small">
        <el-form-item label="院校代码" prop="collegeNo">
          <el-input
            v-model="queryParams.collegeNo"
            placeholder="请输入院校代码"
            clearable
            prefix-icon="el-icon-school"
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="专业代码" prop="professionNo">
          <el-input
            v-model="queryParams.professionNo"
            placeholder="请输入专业代码"
            clearable
            prefix-icon="el-icon-notebook-2"
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="专业名称" prop="professionName">
          <el-input
            v-model="queryParams.professionName"
            placeholder="请输入专业名称"
            clearable
            prefix-icon="el-icon-reading"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 新增：图表统计区域 -->
    <el-card class="chart-card" shadow="hover">
      <div class="card-title">
        <span><i class="el-icon-pie-chart"></i> 专业数据统计</span>
        <el-switch
          v-model="showCharts"
          active-text="显示图表"
          inactive-text="隐藏图表"
        />
      </div>
      <div v-show="showCharts" class="chart-container">
        <el-row :gutter="20">
          <el-col :lg="12" :md="24">
            <div id="collegeProfessionCountChart" class="chart"></div>
          </el-col>
          <el-col :lg="12" :md="24">
            <div id="studyYearDistributionChart" class="chart"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['entrance:profession:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['entrance:profession:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['entrance:profession:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-collection-tag"
          size="mini"
          :disabled="single"
          @click="handleTagSet"
          v-hasPermi="['entrance:profession:tag']"
        >设置标签</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 专业列表区域 -->
    <el-card shadow="hover" class="table-card">
      <el-table
        v-loading="loading"
        :data="professionList"
        @selection-change="handleSelectionChange"
        border
        stripe
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="ID" prop="id" width="60" align="center"/>
        <el-table-column label="专业代码" prop="professionNo" width="100" align="center"/>
        <el-table-column label="专业名称" prop="professionName" min-width="120">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.professionName" placement="top" :disabled="!scope.row.professionName || scope.row.professionName.length < 10">
              <el-tag type="primary" effect="plain">{{ scope.row.professionName }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="院校信息" min-width="140">
          <template slot-scope="scope">
            <div class="college-info">
              <span class="college-no">{{ scope.row.collegeNo }}</span>
              <span class="college-name">{{ scope.row.collegeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="修业年限" prop="studyYear" width="90" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="info">{{ scope.row.studyYear }}年</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分数线" min-width="120">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="250"
              trigger="hover"
              :disabled="!scope.row.scoreLineText"
            >
              <div class="score-details">
                <h4>历年分数线</h4>
                <div v-if="scope.row.scoreLineText">
                  <p v-for="(line, index) in scope.row.scoreLineText.split(',')" :key="index">
                    {{ line }}
                  </p>
                </div>
                <div v-else>暂无分数线信息</div>
              </div>
              <el-tag slot="reference" type="success" effect="plain">查看分数线</el-tag>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="专业详情" min-width="120">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="300"
              trigger="hover"
              :disabled="!scope.row.detailInfo"
            >
              <div class="detail-info">
                <h4>专业介绍</h4>
                <p>{{ scope.row.detailInfo || '暂无专业详情' }}</p>
              </div>
              <el-button slot="reference" type="text" size="small" icon="el-icon-document">查看详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="专业标签" min-width="120">
          <template slot-scope="scope">
            <div class="tag-group">
              <template v-if="scope.row.tagNameText">
                <el-tag 
                  v-for="(tag, index) in scope.row.tagNameText.split(',')" 
                  :key="index"
                  size="small"
                  :type="getTagType(index)"
                  effect="light"
                  class="tag-item"
                >{{ tag }}</el-tag>
              </template>
              <span v-else class="no-tags">暂无标签</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope" v-if="scope.row.id !== 0">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="handleUpdate(scope.row)"
              v-hasPermi="['entrance:profession:edit']"
              title="修改"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="handleDelete(scope.row)"
              v-hasPermi="['entrance:profession:remove']"
              title="删除"
            ></el-button>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-collection-tag"
              circle
              plain
              @click="handleTagSet(scope.row)"
              v-hasPermi="['entrance:profession:tag']"
              title="设置标签"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改专业对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="院校代码" prop="collegeNo">
              <el-input v-model="form.collegeNo" placeholder="请输入院校代码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业代码" prop="professionNo">
              <el-input v-model="form.professionNo" placeholder="请输入专业代码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="专业名称" prop="professionName">
          <el-input v-model="form.professionName" placeholder="请输入专业名称"/>
        </el-form-item>
        <el-form-item label="修业年限" prop="studyYear">
          <el-select v-model="form.studyYear" placeholder="请选择修业年限" style="width: 100%">
            <el-option label="3年" value="3"></el-option>
            <el-option label="4年" value="4"></el-option>
            <el-option label="5年" value="5"></el-option>
            <el-option label="6年" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业详情" prop="detailInfo">
          <el-input type="textarea" v-model="form.detailInfo" placeholder="请输入专业详情" :rows="4"/>
        </el-form-item>

        <el-divider content-position="center">分数线信息</el-divider>
        
        <el-form-item
          v-for="(scoreLine, index) in form.scoreLines"
          :label="'分数线' + (index + 1)"
          :key="scoreLine.key || index"
          :prop="'scoreLines.' + index + '.score'"
          :rules="{required: true, message: '分数不能为空', trigger: 'blur' }"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-date-picker
                v-model="scoreLine.year"
                type="year"
                placeholder="选择年份"
                value-format="yyyy"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col :span="8">
              <el-input-number 
                v-model="scoreLine.score" 
                :min="0" 
                :max="750" 
                placeholder="分数" 
                controls-position="right"
                style="width: 100%"
              ></el-input-number>
            </el-col>
            <el-col :span="4">
              <el-button 
                type="danger" 
                icon="el-icon-delete" 
                circle 
                plain
                @click.prevent="removeScoreLine(scoreLine)"
              ></el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addScoreLine">添加分数线</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设置标签对话框 -->
    <el-dialog :title="tagTitle" :visible.sync="tagOpen" width="500px" append-to-body>
      <div class="tag-container">
        <div class="current-tags">
          <h4>当前标签</h4>
          <div class="tag-list">
            <el-tag
              v-for="tag in this.tagNames"
              :key="tag"
              closable
              :type="getTagType(Math.random() * 5)"
              effect="light"
              class="tag-item"
              @close="handleTagClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <div v-if="tagNames.length === 0" class="no-tags">暂无标签，请添加</div>
          </div>
        </div>
        
        <div class="add-tag">
          <h4>添加新标签</h4>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="tagName"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleTagInputConfirm"
            @blur="handleTagInputConfirm"
            placeholder="请输入标签名称（回车确认）"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" icon="el-icon-plus" @click="showTagInput">添加标签</el-button>
        </div>
        
        <div class="tag-suggestions">
          <h4>推荐标签</h4>
          <div class="suggestion-list">
            <el-tag
              v-for="(tag, index) in suggestedTags"
              :key="index"
              :type="getTagType(index)"
              effect="plain"
              class="tag-item suggestion-tag"
              @click="addSuggestedTag(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindTags">确 定</el-button>
        <el-button @click="tagOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delProfession, listProfession, addProfession, updateProfession, getProfession } from "@/api/entrance/profession";
import { bindTags, getTags } from "@/api/entrance/tag";
import * as echarts from 'echarts';

const MOCK_PROFESSION_KEY = 'mockProfessionData';
const MOCK_COUNT = 400;

function generateMockProfessionData() {
    console.log("Generating new mock profession data...");
    const mockList = [];
    const colleges = [
        { no: 'C001', name: '清华大学' }, { no: 'C002', name: '北京大学' },
        { no: 'C003', name: '浙江大学' }, { no: 'C004', name: '上海交通大学' },
        { no: 'C005', name: '复旦大学' }, { no: 'T001', name: '蓝翔技师学院' },
        { no: 'G001', name: '四川师范大学' }, { no: 'G002', name: '电子科技大学' },
        { no: 'G003', name: '西南财经大学' }, { no: 'G004', name: '成都理工大学' }
    ];
    const majorPrefixes = ['计算机', '软件', '网络', '电子', '机械', '土木', '金融', '会计', '法学', '汉语言', '英语', '数学', '物理', '化学', '生物', '环境', '车辆', '自动化', '通信', '材料'];
    const majorSuffixes = ['科学与技术', '工程', '应用', '学', '设计', '管理', '教育', '文学', '语言学'];
    const studyYears = [3, 4, 4, 4, 4, 5];
    const tags = ['热门', '国家重点', '省级特色', '就业率高', '考研率高', '新兴专业', '工科强校', '文科优势', '理科基础', '交叉学科'];

    for (let i = 1; i <= MOCK_COUNT; i++) {
        const college = colleges[Math.floor(Math.random() * colleges.length)];
        const prefix = majorPrefixes[Math.floor(Math.random() * majorPrefixes.length)];
        const suffix = majorSuffixes[Math.floor(Math.random() * majorSuffixes.length)];
        const name = prefix + suffix + (Math.random() > 0.8 ? '方向' + i : '');
        const studyYear = studyYears[Math.floor(Math.random() * studyYears.length)];
        
        let tagNameText = '';
        const tagCount = Math.floor(Math.random() * 4);
        if (tagCount > 0) {
          const selectedTags = [];
          while(selectedTags.length < tagCount) {
            const tag = tags[Math.floor(Math.random() * tags.length)];
            if (!selectedTags.includes(tag)) {
              selectedTags.push(tag);
            }
          }
          tagNameText = selectedTags.join(',');
        }

        let scoreLineText = '';
        const scoreYearCount = Math.floor(Math.random() * 3) + 1;
        const scores = [];
        for (let y=0; y<scoreYearCount; y++) {
          const year = 2023 - y;
          const score = 500 + Math.floor(Math.random() * 150);
          scores.push(`${year}年: ${score}分`);
        }
        scoreLineText = scores.join(',');


        mockList.push({
            id: 2000 + i,
            professionNo: `P${String(1000 + i).padStart(4, '0')}`,
            professionName: name,
            collegeNo: college.no,
            collegeName: college.name,
            studyYear: studyYear,
            scoreLineText: scoreLineText,
            detailInfo: `${name} 是 ${college.name} 的一个重要专业，主要学习... 修业年限为 ${studyYear} 年。`,
            tagNameText: tagNameText,
            createdTime: new Date(Date.now() - Math.floor(Math.random() * 1000 * 3600 * 24 * 180)).toISOString(),
        });
    }
    try {
        sessionStorage.setItem(MOCK_PROFESSION_KEY, JSON.stringify(mockList));
    } catch (e) {
        console.error("Failed to save mock profession data to sessionStorage:", e);
    }
    return mockList;
}

export default {
  name: "Profession",
  data() {
    return {
      loading: true,
      exportLoading: false,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      professionList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        professionNo: undefined,
        professionName: undefined,
        collegeNo: undefined
      },
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      rules: {
        collegeNo: [
          {required: true, message: "院校代码不能为空", trigger: "blur"}
        ],
        professionNo: [
          {required: true, message: "专业代码不能为空", trigger: "blur"}
        ],
        professionName: [
          {required: true, message: "专业名称不能为空", trigger: "blur"}
        ]
      },
      tagOpen: false,
      tagTitle: '',
      inputVisible: false,
      tagNames: [],
      tagName: '',
      tagType: 'PROFESSION',
      bindTagId: undefined,
      suggestedTags: ['理科专业', '文科专业', '工学', '医学', '理学', '文学', '艺术学', '经济学', '管理学', '法学', '教育学', '农学', '历史学'],
      showCharts: true,
      collegeProfessionCountChart: null,
      studyYearDistributionChart: null
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.initCharts();
  },
  beforeDestroy() {
    if (this.collegeProfessionCountChart) {
       this.collegeProfessionCountChart.dispose();
       this.collegeProfessionCountChart = null;
    }
    if (this.studyYearDistributionChart) {
       this.studyYearDistributionChart.dispose();
       this.studyYearDistributionChart = null;
    }
    window.removeEventListener('resize', this.resizeCharts);
  },
  methods: {
    getOrGenerateMockData() {
      try {
        const storedData = sessionStorage.getItem(MOCK_PROFESSION_KEY);
        if (storedData) {
          console.log("Loading mock profession data from sessionStorage...");
          return JSON.parse(storedData);
        }
      } catch (e) {
         console.error("Failed to load mock profession data from sessionStorage:", e);
         sessionStorage.removeItem(MOCK_PROFESSION_KEY);
      }
      return generateMockProfessionData();
    },
    getList() {
      this.loading = true;
      
      const fullMockList = this.getOrGenerateMockData();

      const { collegeNo, professionNo, professionName } = this.queryParams;
      let filteredList = fullMockList.filter(item => {
          if (collegeNo && item.collegeNo && !item.collegeNo.toLowerCase().includes(collegeNo.toLowerCase())) {
              return false;
          }
          if (professionNo && item.professionNo && !item.professionNo.toLowerCase().includes(professionNo.toLowerCase())) {
              return false;
          }
          if (professionName && item.professionName && !item.professionName.toLowerCase().includes(professionName.toLowerCase())) {
              return false;
          }
          return true;
      });

      this.total = filteredList.length;

      const { pageNum, pageSize } = this.queryParams;
      const start = (pageNum - 1) * pageSize;
      const end = start + pageSize;
      const paginatedList = filteredList.slice(start, end);

      this.professionList = paginatedList;
      this.loading = false;
      
      this.$nextTick(() => {
          this.updateCharts(filteredList);
      });
    },
    getTagType(index) {
      const types = ['', 'success', 'info', 'warning', 'danger'];
      return types[index % types.length];
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        id: undefined,
        collegeNo: undefined,
        professionNo: undefined,
        professionName: undefined,
        studyYear: undefined,
        detailInfo: undefined,
        scoreLines: [{
          year: '',
          score: ''
        }]
      };
      this.resetForm("form");
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加专业";
    },
    handleUpdate(row) {
      this.reset();
      const professionId = row.id || this.ids
      getProfession(professionId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改专业";
      });
    },
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateProfession(this.form).then(response => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            }).catch(() => {
              this.$message.error("修改失败");
            });
          } else {
            addProfession(this.form).then(response => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            }).catch(() => {
              this.$message.error("新增失败");
            });
          }
        }
      });
    },
    handleDelete(row) {
      const professionIds = row.id || this.ids;
      this.$confirm('是否确认删除专业ID为"' + professionIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delProfession(professionIds);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {
      });
    },
    addScoreLine() {
      this.form.scoreLines.push({
        year: '',
        score: '',
        key: Date.now()
      });
    },
    removeScoreLine(item) {
      const index = this.form.scoreLines.indexOf(item);
      if (index !== -1) {
        this.form.scoreLines.splice(index, 1);
      }
    },
    handleTagSet(row) {
      const relId = row.id || this.ids;
      getTags(this.tagType, relId).then(response => {
        this.tagOpen = true;
        this.tagTitle = "设置专业标签";
        this.tagNames = response.data.tagNames;
        this.bindTagId = response.data.relId;
      }).catch(() => {
        this.$message.error("获取标签信息失败");
      });
    },
    handleTagClose(tag) {
      this.tagNames.splice(this.tagNames.indexOf(tag), 1);
    },
    showTagInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleTagInputConfirm() {
      let tagName = this.tagName;
      if (tagName && !this.tagNames.includes(tagName)) {
        this.tagNames.push(tagName);
      }
      this.inputVisible = false;
      this.tagName = '';
    },
    addSuggestedTag(tag) {
      if (!this.tagNames.includes(tag)) {
        this.tagNames.push(tag);
      } else {
        this.$message.info("该标签已添加");
      }
    },
    bindTags: function () {
      let tagData = {
        relId: this.bindTagId,
        tagType: this.tagType,
        tagNames: this.tagNames
      };
      
      bindTags(tagData).then(response => {
        this.$message.success("设置标签成功");
        this.tagOpen = false;
        this.tagNames = [];
        this.tagName = '';
        this.bindTagId = undefined;
        this.getList();
      }).catch(() => {
        this.$message.error("设置标签失败");
      });
    },
    initCharts() {
      this.$nextTick(() => {
        const countChartDom = document.getElementById('collegeProfessionCountChart');
        if (countChartDom) {
          this.collegeProfessionCountChart = echarts.init(countChartDom);
        }
        
        const yearChartDom = document.getElementById('studyYearDistributionChart');
        if (yearChartDom) {
          this.studyYearDistributionChart = echarts.init(yearChartDom);
        }
        
        window.addEventListener('resize', this.resizeCharts);
        
        this.updateCharts(this.getOrGenerateMockData());
      });
    },
    resizeCharts() {
      if (this.collegeProfessionCountChart) {
        this.collegeProfessionCountChart.resize();
      }
      if (this.studyYearDistributionChart) {
        this.studyYearDistributionChart.resize();
      }
    },
    updateCharts(dataList) {
      if (!dataList || dataList.length === 0) {
         if(this.collegeProfessionCountChart) this.collegeProfessionCountChart.clear();
         if(this.studyYearDistributionChart) this.studyYearDistributionChart.clear();
         return;
      }
      if (!this.collegeProfessionCountChart || !this.studyYearDistributionChart) {
          console.warn("Charts not initialized yet.");
          return;
      }
      
      this.updateCollegeProfessionCountChart(dataList);
      this.updateStudyYearDistributionChart(dataList);
    },
    updateCollegeProfessionCountChart(dataList) {
      if (!this.collegeProfessionCountChart) return;
      
      const collegeCountMap = {};
      dataList.forEach(item => {
        const collegeName = item.collegeName || '未知院校';
        if (collegeCountMap[collegeName]) {
          collegeCountMap[collegeName]++;
        } else {
          collegeCountMap[collegeName] = 1;
        }
      });
      
      let data = Object.keys(collegeCountMap).map(name => ({
        name: name,
        value: collegeCountMap[name]
      }));
      
      data.sort((a, b) => b.value - a.value);
      const topN = 10;
      data = data.slice(0, topN);
      
      const option = {
        title: { text: `开设专业数量 Top ${topN} 院校`, left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'value', boundaryGap: [0, 0.01] },
        yAxis: { type: 'category', data: data.map(item => item.name).reverse() },
        series: [
          {
            name: '专业数量',
            type: 'bar',
            data: data.map(item => item.value).reverse(),
            label: { show: true, position: 'right' }
          }
        ]
      };
      this.collegeProfessionCountChart.setOption(option, true);
    },
    updateStudyYearDistributionChart(dataList) {
      if (!this.studyYearDistributionChart) return;
      
      const yearMap = {};
      dataList.forEach(item => {
        const year = item.studyYear ? `${item.studyYear}年` : '未知年限';
        if (yearMap[year]) {
          yearMap[year]++;
        } else {
          yearMap[year] = 1;
        }
      });
      
      const data = Object.keys(yearMap).map(name => ({
        name: name,
        value: yearMap[name]
      }));
      
      const option = {
        title: { text: '专业修业年限分布', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
        legend: { orient: 'vertical', left: 'left', data: data.map(item => item.name) },
        series: [
          {
            name: '修业年限',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: data,
            emphasis: {
              itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
            }
          }
        ]
      };
      this.studyYearDistributionChart.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .table-card {
    margin-bottom: 20px;
  }
  
  .mb8 {
    margin-bottom: 15px;
  }
  
  .college-info {
    display: flex;
    flex-direction: column;
    
    .college-no {
      font-size: 12px;
      color: #909399;
      margin-bottom: 5px;
    }
    
    .college-name {
      font-weight: bold;
      color: #303133;
    }
  }
  
  .score-details, .detail-info {
    h4 {
      margin-top: 0;
      margin-bottom: 10px;
      color: #303133;
      border-bottom: 1px solid #EBEEF5;
      padding-bottom: 8px;
    }
    
    p {
      margin: 5px 0;
    }
  }
  
  .tag-group {
    display: flex;
    flex-wrap: wrap;
    
    .tag-item {
      margin: 2px 4px 2px 0;
    }
    
    .no-tags {
      color: #909399;
      font-size: 12px;
    }
  }
  
  .tag-container {
    padding: 10px;
    
    h4 {
      margin-top: 10px;
      margin-bottom: 15px;
      font-weight: bold;
      color: #303133;
    }
    
    .current-tags, .add-tag, .tag-suggestions {
      margin-bottom: 20px;
    }
    
    .tag-list, .suggestion-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      
      .tag-item {
        margin: 5px 5px 5px 0;
      }
      
      .suggestion-tag {
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    .button-new-tag {
      margin-top: 10px;
    }
    
    .input-new-tag {
      width: 100%;
      margin-top: 10px;
    }
    
    .no-tags {
      color: #909399;
      font-style: italic;
      padding: 10px 0;
    }
  }
}

.chart-card {
  margin-top: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  
  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
    
    span {
      font-size: 16px;
      font-weight: bold;
      
      i {
        margin-right: 5px;
        color: #409EFF;
      }
    }
  }
    
  .chart-container {
    margin-top: 20px;
      
    .chart {
      height: 300px;
      margin-bottom: 20px;
    }
  }
}

/** 表格tips宽度样式*/
:deep(.el-tooltip__popper) {
  max-width: 800px;
}
</style>




